<!-- 
	游戏头部搜索页面 含有搜索框   
	效果链接为  
	https://app.caizhanbao.cn/1524906737%281%294%E7%8E%A92.png
 -->

<template>
	<div class="searchGameTop">
		<div class="searchGameTopMain">
		<div class="topLeft"> 
			<a class="logo" @click="goIndex"><img src="../../static/img/newlogo.png" alt=""/></a>  

			<div class="tabList">
				<a :class="routeUrl==index?'active':''" v-for="(item,index) in tabList" :key="index"  @click="tabListClick(index,item.url)">{{item.name}}</a>
			</div>
		</div>
		<div class="topRight">
			<div class="formInput">
				<span @click="search(searchInput)" ></span>
				<input type="text"  @focus="focus" @keyup.enter="search(searchInput)" @blur="blur"  v-model="searchInput"  placeholder="搜索你想玩的游戏" />
			</div>
			<a class="login" @mouseover="myHover" @mouseout="myHoverOut">
				<div class="loginInfo" v-if="!login">
					<img  class="img" src="https://app.caizhanbao.cn/no.png" />
					<span class="name">{{userName}}</span>
				</div>
				<div class="loginInfo" v-if="login">
					<span class="name" style="padding-left:0.2rem;"></span>
				</div>
				<div class="layer" v-if="!login">
					<div class="layerMain">
						<p class="you">游客 {{userName}}<span v-if="!$store.state.isLoginThree" @click="$store.commit('show')" style="text-indent:0.2rem;"> 请绑定手机号......</span></p>
						<div class="myGame">
							<p class="title" @click="myGame">我的游戏</p>
							<div class="myGameList">
								<div class="gameItem" v-for="(item,index) in $store.state.playLatests">
									<a class="itemName" style="height: 0.3rem;overflow: hidden;">{{item.gameName}}</a>
									<a class="itemNum">{{item.serverName}}</a>
									<a class="itemStart" @click="gameStart(item.softName,item.gameName,item.softId,item.serverId,item.serverName)">进入游戏</a>
								</div>
							</div>
						</div>
						<div class="myGift">
							<p class="title" @click="myGift">我的礼包 <span>(1)</span></p>
							<div class="myGameList">
								<div class="gameItem" v-for="(item,index) in myGiftData">
									<a class="itemNameCopy">{{item.name}}</a>
									<a class="itemNum">{{item.code}}</a>
									<a class="itemStart" @click="copy(index,$event)">点此复制</a>
								</div>
							</div>
						</div>
						<div class="loginBottom">
							<a class="loginIn" @click="$store.commit('layerShow')">退出</a>
							<a class="loginOut" @click="switchAC()"> <span></span> 切换账号</a>
						</div>
					</div>
				</div>
			</a>
			<a class="bindPhone" v-if="$store.state.bindPhone"  @click="$store.commit('show')">绑定手机号</a>
		</div>
	</div>
	<div class="loginLayer" v-if="$store.state.layerShow">
		<a class="img" @click="closeLayerBtm"></a>
			<p v-if="!$store.state.isLoginThree">当前为游客账号，若退出登录则游戏记录无法保存，不如先绑定手机号，这样以后就可以放心玩游戏啦!</p>
			<p v-if="$store.state.isLoginThree" style="text-align:center;">确定要退出么</p>


			<div class="bottom">
				<a class="btnBtm" v-if="!$store.state.isLoginThree" @click="mustLogin">仍要退出</a>
				<a class="btnBtm" v-if="!$store.state.isLoginThree" style="float:right;" @click="bindPhone">绑定手机号</a>
				<a class="btnBtm" v-if="$store.state.isLoginThree" style="margin-left:1.2rem;" @click="mustLogin">仍要退出</a>
			</div>
	</div>
</div>
</template>

<script type="text/javascript">
import reportEvent from "../components/report.js"
import $store from "./vuex.js"
import axios from 'axios';
	export default{
		data(){
				return{
					searchInput:"",
					lenovoId:"",
					token:"",
					routeUrl:0,
                    tabList:[{name:"首页",url:"../newHome"},{name:"游戏中心",url:"../newAllGame"},{name:"个人中心",url:"../newPcenter"},{name:"礼包中心",url:"../newGiftCenter"}],
                    show:false,
                   gameurl: "http://pitf.vgs.lenovo.com.cn",
                    myGameList:[],
                    myGiftData:[],
                   
				}
		},
		
		mounted(){

			if(window.sessionStorage.getItem("userName")){// 重新复制userName
				this.userName=window.sessionStorage.getItem("userName")
			}


			if(window.sessionStorage.getItem("index")){
				this.routeUrl=window.sessionStorage.getItem("index")
			}
			this.changeActive()
			this.myGiftList()
			if(this.$route.query.info){
				this.searchInput=decodeURI(this.$route.query.info)
			}
		},
		watch:{
		  $route(to,from){
		    console.log(to.path);
		  }
		},
		
		computed:{
			userName:{
				get(){
					if($store.state.userName){
						return $store.state.userName
					}else{
						return window.sessionStorage.getItem("userName")
					}
				},
				set(){

				}

			},
			
			login:{
				get(){
					return $store.state.isLogin
				},
				set(){

				}
			},
		},

		methods:{
			copy(index,ev) {

	            var Url2 = document.getElementsByClassName("itemNameCopy")[index].innerText;
	            var oInput = document.createElement('input');
	            oInput.value = Url2;
	            document.body.appendChild(oInput);
	            oInput.select(); // 选择对象
	            document.execCommand("Copy"); // 执行浏览器复制命令
	            oInput.className = 'oInput';
	            oInput.style.display = 'none';

	            this.$toast.top("激活码已复制")
	        },
			myGiftList() { // 获取我的礼包
	            let url = "gift/api/giftbag/queryMyGiftBag.do?lenovoId=" + window.sessionStorage.getItem("lenovoId")
	            let that = this;
	            axios.get(url).then(function(res) {
	                console.log(res)
	                if (res.data.code == 0) {
	                    that.myGiftData = res.data.detaileds;
	                }

	            }, function(err) {

	            })
	        },
			watchRoute(){
				
		
			},
			switchAC(){
				$store.commit('layerShow');
				$store.commit('switchAc',true);
			},
			myGame(){ // 进我的游戏
				this.$router.push({path:"../newPcenter"})
				window.sessionStorage.setItem("index",2);
			},

			myGift(){ // 进礼包中心
				this.$router.push({path:"../newPcenter"})
				window.sessionStorage.setItem("index",2);
			},

			mustLogin(){// 仍要退出
				$store.commit("layerHide");
				$store.commit("allShowOne");
            	$store.commit("bindPhone",false);
            	if($store.state.switchAc){
            		var redirect_url = window.location.href;
			        redirect_url = encodeURIComponent(redirect_url);
			        window.location.href = 'https://lepay.vgs.lenovo.com.cn/#/login?redirect_url='+redirect_url;
            	}
            	
				 window.sessionStorage.setItem("login",false);
				 window.sessionStorage.setItem("token","");
			},
			bindPhone(){// 绑定手机号
				$store.commit("layerHide");
				$store.commit("show");
			},

			closeLayerBtm(){// 关闭二次弹窗
				$store.commit("layerHide")
			},

			myHover(){
				this.myGameList = window.sessionStorage.getItem("myGameList")
				if(this.myGameList){
					this.myGameList=JSON.parse((this.myGameList).split(",")).slice(0,3);
				}

				$(".layer").css("height","3.6rem");


			},

			myHoverOut(){
				
				$(".layer").css("height","0");
			},

			goIndex(){
					let that =this;

					if(window.sessionStorage.getItem("login")){

						this.$router.push({path:"../newHome",query:{token:window.sessionStorage.getItem("token")}});
					}else{
						this.$router.push({path:"../newHome",query:{}});
					}

					this.lenovoId = window.sessionStorage.getItem("lenovoId");
					window.location.reload();

					window.sessionStorage.setItem("index","0");


			},
			goAllGame(){
					this.$router.push({path:'../newAllGame'});

			},
			focus(){
				$(".formInput").css("background","rgba(0,0,0,0.3)")
			},
			blur(){
				$(".formInput").css("background","rgba(0,0,0,0.15)")

			},
			changeActive(){
				if(this.$route.path=='/newHome'){
					$(".searchT").addClass("active")
				}else if(this.$route.path=='/newAllGame'){
					$(".searchS").addClass('active')
				}else{
					
				}
			},
			tabListClick(index,url){
				if(window.sessionStorage.getItem("index")==index){ // 产品晨晨要在当前页的时候点击当前页刷新，你是产品你说了算。
					location.reload()
				}else{
					if(index==0){ // 如果是返回首页，而且 是登录状态，就带一个token 返回首页
						if(window.sessionStorage.getItem("login")){
							
							this.$router.push({path:url,query:{token:window.sessionStorage.getItem("token")}});
						}else{
							
							this.$router.push({path:url});
						}

					}else if(index==2){
						if(window.sessionStorage.getItem("token")){
							this.$router.push({path:url});
						}else{
							var redirect_url = window.location.href;
			                redirect_url = encodeURIComponent(redirect_url);
			                window.location.href = 'https://lepay.vgs.lenovo.com.cn/#/login?redirect_url='+redirect_url;
						}
					}else{
						this.$router.push({path:url});
					}

				}

				

				this.routeUrl=index;
				window.sessionStorage.setItem("index",this.routeUrl)
			},
			 // 跳转搜索页传参

        	search(info){
        		let that =this
        		 	var han = /^[\u4e00-\u9fa5]+$/;
        		    if(info=='' ){
		               this.$toast.top("请输入搜索内容")
		               return false;
		            }
		            if(!han.test(info) || info.length>10){
		            	this.$toast.top("请输入正确的搜索内容")
		               return false;
		            }
        			info = encodeURI(info)
		            this.$router.push({path: '../newSearch', query:{info:info}});

		        },
		            //开始游戏
        gameStart(cpId,gameName,softId,serverId,serviceName) {//  cpId 游戏名称  softId   gameId  区服id，区服名
                let that = this;
                var url = `${this.gameurl}/gameRedirect/loginGame?cp=${cpId}_GAME&game=${softId}&gameName=${gameName}&token=${$store.state.token}`

                this.saveGame(window.sessionStorage.getItem("lenovoId"),cpId,softId,48,serverId,serviceName,gameName)
                window.open(url)
                reportEvent.pageStartGame(this.userId)
        },
        saveGame(lenovoId,cpId,softId, relativeId, serverId,serviceName,gameName) { // 记录玩过的游戏 联想ID cpId softId  平台编号 区服id 区服名 游戏名
            let that = this;
            if (serverId && serviceName) {
                this.resSaveGame(lenovoId,cpId,softId, relativeId,serverId ,serviceName,gameName)
            } else {
                console.log(softId)
                let _url = this.gmConf.domainHttps+"unionlogin.4366.com/lenovo/gamecenter/gslist.do?jsonp&serverType=GENERAL&order=opentime:dasc&gsPageSize=5&online" + "&game=" + softId +"&gsPageNo=1"
                console.log(_url)
                that.jqajax(_url, { type: "post", dataType: "jsonp" },function(res){

                    var _servers = res[softId].servers;
                    var arr = []
                    for (var item in _servers) {
                        arr.push(_servers[item]);
                    }
                    that.newService = arr[0]
                    console.log(that.newService)

                    that.resSaveGame(lenovoId,cpId,softId, relativeId, that.newService.id,that.newService.name,gameName)

                });
            }

        },
        resSaveGame(lenovoId,cpId,softId,relativeId,serverId,serviceName,gameName){
            let that =this
             let url = `/gift/api/webpagegame/collectionGame.do?lenovoId=${lenovoId}&relativeId=${relativeId}&serverId=${serverId}&softId=${softId}&serverName=${serviceName}&gameName=${gameName}&softName=${cpId}`;
                axios.get(url).then(function(res) {
                    if (res.data.code == 0) {
                        
                    } else {
                        that.$toast.center("请求错误")
                    }

                }, function(err) {

                })

        },

			}


		
	}
</script>

<style scoped lang="less">

@import "../common/base.less";
.searchGameTop{
	width:100%;
	.px2rem(height,60);
	background:#3D4248;
	position:absolute;
	top: 0;
	left: 0;
	.loginLayer{
		.px2rem(width,360);
		.px2rem(height,250);
		background:#d7d7d7;
		position:absolute;
		.px2rem(top,60);
		.px2rem(right,750);
		z-index:101;
		.img{
			width:0.2rem;
			height:0.2rem;
			background:url("../../static/img/icon_x.jpg");
			background-size:100% 100%;
			position:absolute;
			top: 0.1rem;
			right: 0.1rem;
		}
		p{
			font-size:0.16rem;
			.px2rem(width,300);
			margin:0 auto;
			margin-top:0.5rem;
		}
		.bottom{
			width:100%;
			height:0.38rem;
			position:absolute;
			left:0;
			bottom:0.5rem;
			.btnBtm{
				    font-size: 0.12rem;
				    width: 1.1rem;
				    height: 0.38rem;
				    line-height: 0.38rem;
				    text-align: center;
				    background: #B12D44;
				    color: #fff;
				    float: left;
				    margin: 0.1rem;
				    margin-top: 0.25rem;
				    border-radius: 0.05rem;
				    text-decoration: none;

			}
		}
	}
	.layer{
			.px2rem(width,360);
			.px2rem(height,0);
			background:#DCDFE2;
			box-shadow:2px 0px 6px rgba(0,0,0,0.3);
			float:right;
			.px2rem(margin-right,360);
			position:absolute;
			.px2rem(top,60);
			.px2rem(right,0);
			z-index:100;
			overflow:hidden;
            transition: all 0.5s ease 0s;
            .layerMain{

            .px2rem(margin,20);
            .px2rem(width,320);
            .px2rem(height,320);



			p{
				margin:0;
			}
			.you{
				.px2rem(font-size,16);
				color:#707B84;
				.px2rem(line-height,30);
				span{
					color:#B12D44;
				}
			}
			.myGame{
				.px2rem(font-size,18);
				color:#000;
				.title{
					.px2rem(line-height,30);
					span{
						color:#B12D44;
					}
					
				}
				.myGameList{
					.px2rem(width,320);
					.px2rem(height,100);
					.gameItem{
						.px2rem(height,36);
						.px2rem(line-height,36);
						a{
							display:block;
							float:left;
							color:#707B84;
							.px2rem(line-height,36);
							.px2rem(font-size,16);

						}
						.itemName{
							float:left;
							.px2rem(width,110);
							text-align:center;
							


						}
						.itemNum{
							.px2rem(width,110);
							text-align:center;
						}
						.itemStart{
							float:right;
							.px2rem(width,80);
							.px2rem(height,26);
							.px2rem(line-height,23);
							color:#B12D44;
							.px2rem(margin-top,5);
							border:1px solid #B12D44;
							text-align:center;
							border-radius:2px;
						}
					}
					.gameItem:hover a{
						color:#B12D44;
    					text-decoration: none;
					}
					.gameItem:hover .itemStart{
						background:#B12D44;
						color:#fff;
					}
				}
				   }
			}

			.myGift{
				.px2rem(font-size,18);
				color:#000;
				.px2rem(margin-top,10);
				.title{
					.px2rem(line-height,30);
					span{
						color:#B12D44;
					}
					
				}
				.myGameList{
					.px2rem(width,320);
					.px2rem(height,100);
					.gameItem{
						.px2rem(height,30);
						.px2rem(line-height,30);
						a{
							display:block;
							float:left;
							color:#707B84;
							.px2rem(line-height,36);
							.px2rem(font-size,16);

						}
						.itemName{
							float:left;
							.px2rem(width,110);
							text-align:center;


						}
						.itemNum{
							.px2rem(width,110);
							text-align:center;
						}
						.itemStart{
							float:right;
							.px2rem(width,80);
							.px2rem(height,26);
							.px2rem(line-height,23);
							color:#B12D44;
							.px2rem(margin-top,5);
							text-align:center;
							
						}
					}
					.gameItem:hover a{
    					text-decoration: none;
					}
					
				}
			}

		.loginBottom{
			.px2rem(width,320);
			.px2rem(height,30);
			.px2rem(line-height,30);
			.px2rem(font-size,16);
			color:#707B84;
    		position: absolute;
    		left:0.2rem;
    		bottom:0.1rem;

			.loginIn{
				
				float:left;
				color:#707B84;
			}
			.loginOut{
				float:right;
				color:#707B84;
				span{
					display:block;
					.px2rem(width,20);
					.px2rem(height,16);
					background:url("../../static/img/tab.png");
					background-size:100% 100%;
					float:left;
					.px2rem(margin-top,8);
					.px2rem(margin-right,5);
				}
			}
		}


	}


	.searchGameTopMain{
		.px2rem(width,1200);
		.px2rem(height,60);
		 margin: 0 auto;
		 color:#979EA4;



	.topLeft{
            .px2rem(height,60);
		.logo{
            .px2rem(width,125);
            .px2rem(height,32);
            display:block;
            .px2rem(margin-top,15);
            float:left;

            img{
            	width:100%;
            	height:100%;
            }
		}
		.tabList{
			float:left;
			.px2rem(width,520);
			.px2rem(height,60);
			.px2rem(line-height,60);
			text-align:center;
			color: #FFF;
			.px2rem(font-size,20);
			.px2rem(margin-left,40);
			a{
				display:block;
				float:left;
				.px2rem(width,130);
				.px2rem(height,60);
				.px2rem(line-height,60);
				text-align: center;
				color: #fff;
				.px2rem(font-size,20);
				text-decoration: none;
			}

		}
		.tabList a:hover{
			background:#0C111B;
		}
		.active{
			color:#fff;
			background:#0C111B;
		}
		.searchS{
			.px2rem(margin-left,50);
		}
		float: left;
		.px2rem(font-size,24);
		color: #fff;
	}
	.topRight{
		float: right;
		.px2rem(height,60);
		.px2rem(line-height,60);
		div{
			float:left;
		}
	}

	.formInput{
		.px2rem(width,194);
		.px2rem(height,34);
		 background: rgba(0,0,0,0.15);
		.px2rem(border-radius,15);
		color: #fff;
		position: relative;
		.px2rem(margin-top,15);
		border:1px solid #979EA4;
		span{
			display: block;
			float: left;
			.px2rem(width,20); 
			.px2rem(height,20);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: url("../../static/img/search_game.png");
			background-size: 100% 100%;
			.px2rem(margin-left,10);
		}
		input{
			float:left;
			.px2rem(width,130);
			.px2rem(height,30);
			.px2rem(line-height,30);
			background: none;
			.px2rem(font-size,10);
			.px2rem(margin-left,40);
			border: none;
			outline:none;
			 color: #ccc !important;
		}
		input::-webkit-input-placeholder{
            color:#ccc;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#ccc;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#ccc;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#ccc;
        }
	}
	.login{
		.px2rem(width,175);
		.px2rem(height,60);
		.px2rem(line-height,60);

		.img{
			float:left;
			.px2rem(width,30);
			.px2rem(height,30);
		
			.px2rem(border-radius,15);
			.px2rem(margin-left,20);
			.px2rem(margin-top,15);
		}
		.name{
			float:left;
			display:block;
			.px2rem(width,100);
			.px2rem(height,60);
			.px2rem(line-height,60);
			.px2rem(font-size,10);
			.px2rem(margin-left,5);
			.px2rem(margin-right,20);
			overflow:hidden;
			color:#979EA4;
		}

	}
	.bindPhone{
		float:left;
		display:block;
		.px2rem(width,98);
		.px2rem(height,38);
		.px2rem(line-height,34);
		.px2rem(margin-top,12);
		border:1px solid #979EA4;
		text-align:center;
		.px2rem(font-size,12);
		color:#979EA4;
	}
	.bindPhone:hover{
    	text-decoration: none;
		
	}
}
}

</style>